<div class="PianoBlock">
  <div class="Ver8 bc-flex bc-flex-d-c bc-flex-jc-c bc-flex-ai-s bc-t-999 bc-f-13rp ps-r" style="width:90px;">
    <div scale="88" class="piano-key whiteKey">C</div>
  </div>
  <div class="Ver8 bc-flex bc-flex-d-c bc-flex-jc-c bc-flex-ai-s bc-t-999 bc-f-13rp ps-r" style="width:90px;">
    <div scale="87" class="piano-key whiteKey">B</div>
    <div scale="86" class="piano-key blackKey" style="top:24px;">A#</div>
    <div scale="85" class="piano-key whiteKey">A</div>
    <div scale="84" class="piano-key blackKey" style="top:48px;">G#</div>
    <div scale="83" class="piano-key whiteKey">G</div>
    <div scale="82" class="piano-key blackKey" style="top:72px;">F#</div>
    <div scale="81" class="piano-key whiteKey">F</div>
    <div scale="80" class="piano-key whiteKey">E</div>
    <div scale="79" class="piano-key blackKey" style="top:120px;">D#</div>
    <div scale="78" class="piano-key whiteKey">D</div>
    <div scale="77" class="piano-key blackKey" style="top:144px;">C#</div>
    <div scale="76" class="piano-key whiteKey">C</div>
  </div>
  <div class="Ver8 bc-flex bc-flex-d-c bc-flex-jc-c bc-flex-ai-s bc-t-999 bc-f-13rp ps-r" style="width:90px;">
    <div scale="75" class="piano-key whiteKey">B</div>
    <div scale="74" class="piano-key blackKey" style="top:24px;">A#</div>
    <div scale="73" class="piano-key whiteKey">A</div>
    <div scale="72" class="piano-key blackKey" style="top:48px;">G#</div>
    <div scale="71" class="piano-key whiteKey">G</div>
    <div scale="70" class="piano-key blackKey" style="top:72px;">F#</div>
    <div scale="69" class="piano-key whiteKey">F</div>
    <div scale="68" class="piano-key whiteKey">E</div>
    <div scale="67" class="piano-key blackKey" style="top:120px;">D#</div>
    <div scale="66" class="piano-key whiteKey">D</div>
    <div scale="65" class="piano-key blackKey" style="top:144px;">C#</div>
    <div scale="64" class="piano-key whiteKey">C</div>
  </div>
  <div class="Ver8 bc-flex bc-flex-d-c bc-flex-jc-c bc-flex-ai-s bc-t-999 bc-f-13rp ps-r" style="width:90px;">
    <div scale="63" class="piano-key whiteKey">B</div>
    <div scale="62" class="piano-key blackKey" style="top:24px;">A#</div>
    <div scale="61" class="piano-key whiteKey">A</div>
    <div scale="60" class="piano-key blackKey" style="top:48px;">G#</div>
    <div scale="59" class="piano-key whiteKey">G</div>
    <div scale="58" class="piano-key blackKey" style="top:72px;">F#</div>
    <div scale="57" class="piano-key whiteKey">F</div>
    <div scale="56" class="piano-key whiteKey">E</div>
    <div scale="55" class="piano-key blackKey" style="top:120px;">D#</div>
    <div scale="54" class="piano-key whiteKey">D</div>
    <div scale="53" class="piano-key blackKey" style="top:144px;">C#</div>
    <div scale="52" class="piano-key whiteKey">C</div>
  </div>
  <div class="Ver8 bc-flex bc-flex-d-c bc-flex-jc-c bc-flex-ai-s bc-t-999 bc-f-13rp ps-r" style="width:90px;">
    <div scale="51" class="piano-key whiteKey">B</div>
    <div scale="50" class="piano-key blackKey" style="top:24px;">A#</div>
    <div scale="49" class="piano-key whiteKey">A</div>
    <div scale="48" class="piano-key blackKey" style="top:48px;">G#</div>
    <div scale="47" class="piano-key whiteKey">G</div>
    <div scale="46" class="piano-key blackKey" style="top:72px;">F#</div>
    <div scale="45" class="piano-key whiteKey">F</div>
    <div scale="44" class="piano-key whiteKey">E</div>
    <div scale="43" class="piano-key blackKey" style="top:120px;">D#</div>
    <div scale="42" class="piano-key whiteKey">D</div>
    <div scale="41" class="piano-key blackKey" style="top:144px;">C#</div>
    <div scale="40" class="piano-key whiteKey">C</div>
  </div>
  <div class="Ver8 bc-flex bc-flex-d-c bc-flex-jc-c bc-flex-ai-s bc-t-999 bc-f-13rp ps-r" style="width:90px;">
    <div scale="39" class="piano-key whiteKey">B</div>
    <div scale="38" class="piano-key blackKey" style="top:24px;">A#</div>
    <div scale="37" class="piano-key whiteKey">A</div>
    <div scale="36" class="piano-key blackKey" style="top:48px;">G#</div>
    <div scale="35" class="piano-key whiteKey">G</div>
    <div scale="34" class="piano-key blackKey" style="top:72px;">F#</div>
    <div scale="33" class="piano-key whiteKey">F</div>
    <div scale="32" class="piano-key whiteKey">E</div>
    <div scale="31" class="piano-key blackKey" style="top:120px;">D#</div>
    <div scale="30" class="piano-key whiteKey">D</div>
    <div scale="29" class="piano-key blackKey" style="top:144px;">C#</div>
    <div scale="28" class="piano-key whiteKey">C</div>
  </div>
  <div class="Ver8 bc-flex bc-flex-d-c bc-flex-jc-c bc-flex-ai-s bc-t-999 bc-f-13rp ps-r" style="width:90px;">
    <div scale="27" class="piano-key whiteKey">B</div>
    <div scale="26" class="piano-key blackKey" style="top:24px;">A#</div>
    <div scale="25" class="piano-key whiteKey">A</div>
    <div scale="24" class="piano-key blackKey" style="top:48px;">G#</div>
    <div scale="23" class="piano-key whiteKey">G</div>
    <div scale="22" class="piano-key blackKey" style="top:72px;">F#</div>
    <div scale="21" class="piano-key whiteKey">F</div>
    <div scale="20" class="piano-key whiteKey">E</div>
    <div scale="19" class="piano-key blackKey" style="top:120px;">D#</div>
    <div scale="18" class="piano-key whiteKey">D</div>
    <div scale="17" class="piano-key blackKey" style="top:144px;">C#</div>
    <div scale="16" class="piano-key whiteKey">C</div>
  </div>
  <div class="Ver8 bc-flex bc-flex-d-c bc-flex-jc-c bc-flex-ai-s bc-t-999 bc-f-13rp ps-r" style="width:90px;">
    <div scale="15" class="piano-key whiteKey">B</div>
    <div scale="14" class="piano-key blackKey" style="top:24px;">A#</div>
    <div scale="13" class="piano-key whiteKey">A</div>
    <div scale="12" class="piano-key blackKey" style="top:48px;">G#</div>
    <div scale="11" class="piano-key whiteKey">G</div>
    <div scale="10" class="piano-key blackKey" style="top:72px;">F#</div>
    <div scale="9" class="piano-key whiteKey">F</div>
    <div scale="8" class="piano-key whiteKey">E</div>
    <div scale="7" class="piano-key blackKey" style="top:120px;">D#</div>
    <div scale="6" class="piano-key whiteKey">D</div>
    <div scale="5" class="piano-key blackKey" style="top:144px;">C#</div>
    <div scale="4" class="piano-key whiteKey">C</div>
  </div>
  <div class="Ver88 bc-flex bc-flex-d-c bc-flex-jc-c bc-flex-ai-s bc-t-999 bc-f-13rp ps-r" style="width:90px;">
    <div scale="3" class="piano-key whiteKey">B</div>
    <div scale="2" class="piano-key blackKey" style="top:24px;">A#</div>
    <div scale="1" class="piano-key whiteKey">A</div>
  </div>
</div>

<script>
  // 琴键音效即触发效果
  function Playing(ele) {
    if (ele.hasClass("whiteKey")) {
      ele.addClass("WKActive");
    } else {
      ele.addClass("BKActive");
    }
    var pianoKey = new Audio("res/e-piano/" + ele.attr("scale") + ".mp3");
    pianoKey.volume = 0.2;
    pianoKey.currentTime = 0;
    pianoKey.preload = "auto";
    pianoKey.play();
  }
</script>